<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        div {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: 500px;
            height: 200px;
        }

        div input {
            width: 80px;
            height: 80px;
        }

        div select {
            width: 40px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div>

        <input id="num1" type="text" name="" placeholder="请输入数字">
        <select name="" id="yunsuan">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="" id="num2" placeholder="请输入数字">
        <span>=</span>
        <input type="text" name="" id="total">

    </div>
</body>
<script>
    var num1 = document.getElementById("num1")
    var num2 = document.getElementById("num2")



    num2.onblur = function () {
        var yunsuan = document.getElementById("yunsuan")
        var total = document.getElementById("total")
        var index = yunsuan.selectedIndex; // 选中索引

        var text = yunsuan.options[index].text; // 选中文本

        var value1 = yunsuan.options[index].value; // 选中值
        if (value1 == "+") {
            total1 = parseInt(num1.value) + parseInt(num2.value)
            total.value = total1
        } else if (value1 = "*") {
            total1 = parseInt(num1.value) * parseInt(num2.value)
            total.value = total1

        } else if (value1 = "-") {
            total1 = parseInt(num1.value) - parseInt(num2.value)
            total.value = total1

        } else {
            total1 = parseInt(num1.value) / parseInt(num2.value)
            total.value = total1
        }

    }
</script>

</html>